<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css\contact.css">
    <link rel="stylesheet" href="asset\set.css">
    <link rel="stylesheet" href="icon\iconfont\iconfont.css">
    <script src="js\contact.js"></script>
    <title>contact</title>
</head>
<body>
    <div class="container">
        <header>
            <img src="img/head_portrait.png" onclick="location.href='functions.html'">
            <div class="name_status">
                <p>联系人</p>
            </div>
            <div class="right-icon">
                <i class="i ic:person-plus"></i>
            </div>
        </header>
        <div class="search">
            <div class="search-box" onclick="location.href='search.html'">
                <i class="i ic:search"></i>
                <span>搜索</span>
            </div>
        </div>
        <ul class="info">
            <li>
                <span>新朋友</span>
                <i class="i ic:arrow-right"></i>
            </li>
            <li>
                <span>群通知</span>
                <i class="i ic:arrow-right"></i>
            </li>
        </ul>
        <ul class="type">
            <li>
                <span>好友</span>
            </li>
            <li>
                <span class="selected">分组</span>
            </li>
            <li>
                <span>群聊</span>
            </li>
            <li>
                <span>频道</span>
            </li>
            <li>
                <span>机器人</span>
            </li>
            <li>
                <span>设备</span>
            </li>
            <li>
                <span>通讯录</span>
            </li>
        </ul>
        <ul class="group"> 
            <li>
                <div class="info">
                    <div class="left">
                        <p id="first"><i class="i ic:arrow-right-rounded" id="arrow-right"></i>特别关心</p>
                        <p id="second" style="display:none;"><i class="i ic:arrow-drop-down"></i>特别关心</p>
                    </div>
                    <div class="right">
                        <p>0/0</p>
                    </div>
                </div>
                <ul class="group-detail"></ul>
            </li>
            <li>
                <div class="info">
                    <div class="left">
                        <p><i class="i ic:arrow-right-rounded"></i>
                            好友</p>
                    </div>
                    <div class="right">
                        <p>8/10</p>
                    </div>
                </div>
                <ul class="group-detail">
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                    <li>   
                        <img src="img/head_portrait.png">
                        <div class="name-status">
                            <p class="name">我</p>
                            <div class="status">
                                <span class="content">[学习中]</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="info">
                    <div class="left">
                        <p><i class="i ic:arrow-right-rounded"></i>高中</p>
                    </div>
                    <div class="right">
                        <p>0/0</p>
                    </div>
                </div>
                <ul class="group-detail"></ul>
            </li>
            <li>
                <div class="info">
                    <div class="left">
                        <p><i class="i ic:arrow-right-rounded"></i>大学</p>
                    </div>
                    <div class="right">
                        <p>0/0</p>
                    </div>
                </div>
                <ul class="group-detail"></ul>
            </li>
        </ul>
        <ul class="menu">
            <li onclick="location.href='message.html'">
                <i class="i ic:message"></i>
                <p>消息</p>
            </li>
            <li>
                <i class="i ic:contacts" id="selected"></i>
                <p>联系人</p>
            </li>
            <li onclick="location.href='dynamic.html'">
                <img src="iconfont-img\dynamic.ico" alt="">
                <p>动态</p>
            </li>
        </ul> 
    </div>
</body>
</html>